<template>
    <div class="addUserAuth-container">
        <b-container class="bv-example-row row-box">
            <div class="layout">
                <Layout>
                    <Sider breakpoint="md" collapsible :collapsed-width="78" v-model="isCollapsed">
                        <Menu active-name="1-1" theme="dark" width="auto" :class="menuitemClasses">
                            <MenuItem name="1-1" to="/userIndex">
                                <Icon type="ios-home-outline" />
                                <span>个人主页</span>
                            <!-- eslint-disable-next-line vue/no-parsing-error -->
                            </MenuItem>
                            <MenuItem name="1-2" to="/receiveAddress">
                                <Icon type="ios-paper-plane-outline" />
                                <span>收货地址</span>
                            <!-- eslint-disable-next-line vue/no-parsing-error -->
                            </MenuItem>
                            <MenuItem name="1-3" to="/updatePwd">
                                <Icon type="ios-settings"></Icon>
                                <span>修改密码</span>
                            <!-- eslint-disable-next-line vue/no-parsing-error -->
                            </MenuItem>
                            <MenuItem name="1-4" to="/myFollow">
                                <Icon type="ios-heart-outline" />
                                <span>我的关注</span>
                            <!-- eslint-disable-next-line vue/no-parsing-error -->
                            </MenuItem>
                            <MenuItem name="1-5" to="/myCollection">
                                <Icon type="ios-star-outline" />
                                <span>我的收藏</span>
                            <!-- eslint-disable-next-line vue/no-parsing-error -->
                            </MenuItem>
                            <MenuItem name="1-6" to="/myGoods" v-if="user.uRole==='business'">
                                <Icon type="logo-googleplus" />
                                <span>商品管理</span>
                            <!-- eslint-disable-next-line vue/no-parsing-error -->
                            </MenuItem>
                            <MenuItem name="1-7" to="/myWants" v-if="user.uRole==='business'">
                                <Icon type="ios-color-wand-outline" />
                                <span>求购管理</span>
                            <!-- eslint-disable-next-line vue/no-parsing-error -->
                            </MenuItem>
                            <Submenu name="1-8" v-if="user.uRole==='business'">
                                <template slot="title">
                                    <Icon type="ios-card-outline" />
                                    订单管理
                                </template>
                                <!-- eslint-disable-next-line vue/no-parsing-error -->
                                <MenuItem name="5-1" to="/mySellOrders"><Icon type="ios-card" /> 我卖出的</MenuItem>
                                <!-- eslint-disable-next-line vue/no-parsing-error -->
                                <MenuItem name="5-2" to="/myBuyOrders"><Icon type="md-card" /> 我买到的</MenuItem>
                            </Submenu>
                            <MenuItem name="1-9" to="/myInfo">
                                <Icon type="ios-chatbubbles-outline" />
                                <span>我的消息</span>
                            <!-- eslint-disable-next-line vue/no-parsing-error -->
                            </MenuItem>
                        </Menu>
                        <div slot="trigger"></div>
                    </Sider>
                    <Layout>
                        <Content :style="{padding: '20px', background: '#fff', minHeight: '220px'}">
                            <router-view></router-view>
                        </Content>
                    </Layout>
                </Layout>
            </div>
        </b-container>
    </div>
</template>

<script>
export default {
  name: 'userIndex',
  data () {
    return {
      isCollapsed: false,
      user: JSON.parse(localStorage.getItem('user')) // 用户信息
    }
  },
  computed: {
    menuitemClasses () {
      return [
        'menu-item',
        this.isCollapsed ? 'collapsed-menu' : ''
      ]
    }
  }
}
</script>

<style>
.ivu-menu {
    z-index: 10 !important;
}
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-header-bar{
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.menu-item span{
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
}
.menu-item i{
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
}
.collapsed-menu span{
    width: 0px;
    transition: width .2s ease;
}
.collapsed-menu i{
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
}
</style>
